<template>
    <div>
        <h1> {{ msg.toUpperCase() }} </h1>
        单向数据绑定: <input type="text" v-bind:value="msg.toUpperCase()" /> <br>

        <!-- v-model:value可以简写为v-model，因为v-model默认收集的就是value值 -->

        <!-- 双向绑定一般都应用在表单类元素上（如：<input>、<select>、<textarea>等） -->

        双向数据绑定: <input type="text" v-model="msg" />
    </div>
</template>

<br></br>

<script>
export default {
    name: 'HelloBing',
    data() {
        return {
            msg: 'Welcome'
        }
    }
}
</script>

<style scoped>
input {
    margin-bottom: 10px;
}
</style>

